<template>
  <div class="login-wrap">
    <el-form class="login-container"
             :model="form"
             label-width="60px">
      <h1 class="title">用户登录</h1>
      <el-form-item label="账  号">
        <el-input type="text"
                  v-model="UserName"
                  placeholder="登录账号"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密  码">
        <el-input type="password"
                  v-model="Password"
                  placeholder="登录密码"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <el-col :span="11">
          <el-input type="text"
                    v-model="CaptchCode"
                    placeholder="请输入验证码"
                    autocomplete="off"></el-input>
        </el-col>
        <el-col :span="11">
          <el-image style="width: 90px; height: 35px"
                    :src="CaptchUrl"
                    fit="contain"
                    @click="getCaptchData()" />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   style="width: 100%;"
                   @click="dosubmit()">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { login, getCaptch } from "@/api/account"
export default {
  name: 'Login',
  data () {
    return {
      UserName: "Admin",
      Password: "Admin",
      CaptchCode: "",
      CaptchUrl: "",
      CaptchId: 0
    }
  },
  mounted () {
    getCaptch().then(res => {
      this.CaptchId = res.captchId
      this.CaptchUrl = 'data:image/png;base64,' + res.captchBase64Str
    })
  },
  methods: {
    dosubmit: function () {
      let params = {
        UserAccount: this.UserName,
        Password: this.Password,
        CaptchCode: this.CaptchCode,
        CaptchId: this.CaptchId
      };
      login(params).then(res => {
        console.log(res)
        //let bear=res.data.headers.find(x=>x.key==="Authorization").value;
        if (!res)
          this.getCaptchData()
        else {
          let bearer = res.token;
          localStorage.setItem("token", bearer);
          this.$router.push('/Home');
        }
      })
    },
    getCaptchData: function () {
      getCaptch().then(res => {
        this.CaptchId = res.captchId
        this.CaptchUrl = 'data:image/png;base64,' + res.captchBase64Str
      })
    }
  }
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url();
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>